<template>
    <div class="child-component">
        <childComponent :parentData="parentData" :editParentData="editParentData" />
    </div>
</template>

<script setup lang="jsx">
import { reactive } from 'vue'
const parentData = reactive({
    id: '01',
    name: 'parent',
    des: '这是一条父组件里的数据'
})

const editParentData = () => {
    parentData.des = '父组件数据被修改了'
}

const childComponent = ({ parentData, editParentData }) => {
    return (
        <>
            <h3>父组件传来的数据</h3>
            <p>id: {parentData.id}</p>
            <p>name: {parentData.name}</p>
            <p>des: {parentData.des}</p>
            <button onClick={() => editParentData()}>修改父组件数据</button>
        </>
    )
}
</script>